import React, { useContext, useEffect, useState } from 'react'
const Context = React.createContext()
export function Provider(props) {
  let { store, children } = props;
  return <Context.Provider value={{ store: store }}>
    {children}
  </Context.Provider>
}

// export function connect(cb1, cb2) {
//   return function (Comp) {
//     return function App2(props) {
//       let context = useContext(Context)
//       let [n, setN] = useState(0)
//       useEffect(() => {
//         let clear = context.store.subscribe(() => {
//           //更新视图
//           console.log(n)
//           setN(n + 1)
//         })
//         return clear
//       })
//       return <Comp
//         {...props}
//         {...cb1(context.store.getState())}
//         {...cb2(context.store.dispatch)} />
//     }
//   }
// }
export function connect(cb1, cb2) {
  return function (Comp) {
    return class App2 extends React.Component {
      static contextType = Context
      componentDidMount() {
        this.clear = this.context.store.subscribe(() => {
          this.setState({})
        })
      }
      componentWillUnmount() {
        this.clear()
      }
      render() {
        return <Comp
          {...this.props}
          {...cb1(this.context.store.getState())}
          {...cb2(this.context.store.dispatch)} />
      }
    }
  }
}